<template>
	<view class="address-add">
		<my-header title="添加地址"></my-header>
		<my-content class="content" :default-padding-top="10">
				<view class="address_box">
					<view class="address_item">
						<view class="address_item_label">收件人</view>
						<input placeholder-style="color:#808080;font-weight:bold;font-size:30rpx" v-model="addressParams.username" class="address_item_value" placeholder="请填写收货人名字"  />
					</view>
					<view class="address_item">
						<view class="address_item_label">手机号码</view>
						<input placeholder-style="color:#808080;font-weight:bold;font-size:30rpx" type="number" v-model="addressParams.mobile" class="address_item_value" placeholder="请填写收货人手机号码"  />
					</view>
					<view class="address_item">
						<view class="address_item_label">所在地区</view>
						<view @click="openPicker" class="address_item_value" v-if="this.addressParams.city">{{addressData}}</view>
						<view @click="openPicker" class="address_item_value none" v-else>{{addressData}}</view>
						<my-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></my-selectDity>
					</view>
					<view class="address_item detail">
						<view class="address_item_label">详细地址</view>
						<textarea placeholder-style="color:#808080;font-weight:bold;font-size:30rpx" v-model="addressParams.detail" class="address_item_value"  auto-height placeholder="详细的地址,如道路,小区,门牌号等" />
					</view>
					<view class="address_item default">
						<view class="address_item_label">设为默认地址</view>
						<image src="https://www.dingxians.cn/upload/images/common/open.png" style="width: 120rpx;height: 46rpx;" @click="changeStatus" v-if="addressParams.status" />
						<image src="https://www.dingxians.cn/upload/images/common/close.png" style="width: 120rpx;height: 46rpx;" @click="changeStatus" v-else />
					</view>
				</view>
				
				<view class="add_btn btn-primary" v-if="complete" @click="submit()">保存编辑</view>
				<view class="add_btn btn-primary un_complete" v-else>保存编辑</view>
			</my-content>
		
	</view>
	</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				addressParams :{
					username:'',
					mobile:'',
					province:'',
					city:'',
					area:'',
					status:0,
					detail:''
				},
				show:false,
				addressData:'点击选择地区',
			}
		},
		onLoad() {
		},
		onShow(){
			
		},
		computed:{
			complete(){
				return (this.addressParams.username && this.addressParams.mobile && this.addressParams.detail);
			}
		},
		
		methods: {
			//选中省市区
			onsetCity(e) {
				let data = e.detail.target.dataset;
				let address = data.province + data.city + data.area;
				this.show = false
				this.addressData = address
				this.addressParams.province = data.province
				this.addressParams.city = data.city
				this.addressParams.area = data.area
			},
			onhideShow() {
				this.show = false
			},
			openPicker() {
				this.show = true
			},
			changeStatus(e) {
				this.addressParams.status = !this.addressParams.status // = e.detail.value
			},
			submit(){
				if (!this.addressParams.username) {
					this.show('请输入收件人');
					return;
				}
				if (!this.addressParams.mobile) {
					this.show('请输入手机号');
					return;
				}
				if (!this.addressParams.city) {
					this.show('请选择地址');
					return;
				}
				if (!this.addressParams.detail) {
					this.show('请输入详细地址');
					return;
				}
				uni.showLoading({
					title:'添加中'
				})
				api.userAddress.store(this.addressParams).then(res => {
					if (res.code === 200) {
						uni.hideLoading()
						this.header(`/pages/address/index`);
					}
				}).catch(error => {
					console.log(error)
				})
			}
		},
	}
</script>

<style lang="scss">
	.address-add {
		background-color: #000;
		min-height: 100vh;
		height: 100%;
	}
	.content {
		
		.address_box {
			display: flex;
			flex-direction: column;
			/* padding-top: 20rpx; */
			background-color: #030522;
			color: white;
			margin: 10rpx 20rpx;
			.address_item {
				display: flex;
				
				align-items: center;
				margin: 0 20rpx;
				height: 100rpx;
				&:last-child{
					/* margin-top: 20rpx; */
				}
				&.detail {
					// padding-bottom: 100rpx;
				}
			
				.address_item_label {
					width: 180rpx;
					margin-right: 18rpx;
					margin-left: 18rpx;
				}
				&.default {
					justify-content: space-between;
					.address_item_label {
						width: 200rpx;
					}
				}
				.address_item_value {
					// color: #333;
					// font-weight: bold;
					color: white;
					text-align: right;
					flex:1;
					margin-right: 12rpx;
					&.none {
						/* color:#ccc; */
						font-weight:bold;
						font-size:30rpx
					}
				}
				.address_select {
					color: #999;
				}
			}
		}
		.add_btn {
      margin: 30rpx auto 0;
			/* background-color: #A361F6; */
			background-size: 100% 100%;
			width: 700rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #fff;
			&.un_complete {
				background-size: 100% 100%;
				color: #fff;
			}
		}
	}
	
</style>